<template>
	<div class="diy-box">
		<el-card shadow="never" class="!border-none flex-1" :body-style="{ height: '100%' }">
			<div class="flex h-full items-start">
				<div class="page-preview flex-1">
					<div class="page-preview—content">
						<div class="mobile-preview">
							<div class="mobile-content">
								<slot name="left"></slot>
							</div>
						</div>
					</div>
				</div>
				<div class="page-setting overflow-y-scroll">
					<slot name="right"></slot>
				</div>
			</div>
		</el-card>
		<footerSubmit>
			<slot name="footer"></slot>
		</footerSubmit>
	</div>
</template>
<script lang="ts" setup name="diyBase"></script>
<style lang="scss">
.diy-box {
	min-height: calc(100vh - 120px);
	min-width: 800px;

	.page-preview {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: 100%;
		.page-preview—content {
			width: 390px;
			height: 790px;
			margin: 0 20px;
			color: #333;
			position: relative;
			background-image: url('/@/assets/iPhoneX_model.png');
			background-repeat: no-repeat;
			background-size: 100%;
			border-radius: 30px;
			padding: 48px 20px 38px 20px;

			.mobile-preview {
				overflow-y: auto;
				height: 644px;
				background-color: #f7f7f7;

				&::-webkit-scrollbar {
					display: none;
				}

				.mobile-content {
					height: 100%;
					position: relative;
				}
			}
		}
	}

	.page-setting {
		max-height: calc(100vh - 75px);
		padding: 0 20px;

		.title {
			font-size: var(--el-font-size-large);
			font-weight: 500;
			align-items: center;
			display: flex;
		}

		.title::before {
			content: var(--tw-content);
			background-color: var(--el-color-primary);
			width: 3px;
			height: 14px;
			display: block;
			margin-right: 8px;
		}

		.sub-title {
			align-items: flex-end;
			display: flex;
			margin-bottom: 16px;
			font-size: var(--el-font-size-base);
			font-weight: 500;
		}

		.title-tips {
			font-size: var(--el-font-size-extra-small);
			line-height: 24px;
			color: var(--el-text-color-secondary);
			margin-left: 10px;
		}

		.sub-item {
			position: relative;

			&:hover>.icon-close {
				display: flex;
			}

			.close-btn {
				display: none;
				position: absolute;
				top: -6px;
				right: -6px;
				width: 16px;
				height: 16px;
				background-color: #0000004d;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				color: #fff;
				cursor: pointer;
			}

			&:hover {
				.close-btn {
					display: flex;
				}
			}
		}
	}
}
</style>
